import { useDark } from '@vueuse/core';
const isDark = useDark();

/**
 * 公共样式
 */
export const common = (): any => {
  if (isDark.value) {
    return {
      fontFamily: 'Consolas, Monaco',
      titleColor: '#8C8C8C',
      textColor: '#a7a7a7',
      legendColor: '#a7a7a7',
      axisLineColor: '#272727',
      // axisLineColor: '#000000',
      itemShadowColor: 'rgba(255, 255, 255, 0.3)',
      lineShadowColor: 'rgba(255, 255, 255, 0.5)',
      backgroundColor: '#131313'
    }
  } else {
    return {
      fontFamily: 'Consolas, Monaco',
      titleColor: '#8C8C8C',
      textColor: '#494949',
      legendColor: '#494949',
      axisLineColor: '#ececec',
      itemShadowColor: 'rgba(0, 0, 0, 0.7)',
      lineShadowColor: 'rgba(0, 0, 0, 0.5)',
      backgroundColor: '#ffffff'
    }
  }
}

/**
 * 标题
 */
export const title = (): any => {
  return {
    textStyle: {
      fontSize: 14,
      fontFamily: common().fontFamily,
      color: common().titleColor
    }
  }
}


/**
 * 滑动框样式
 * showDetail: 滑动的时候是否显示所在坐标的信息
 */
export const dataZoom = (): any => {
  let common = { show: true, showDetail: false, }
  if (isDark.value) {
    return {
      ...common, ...{
        backgroundColor: '#87878700',
        fillerColor: '#76767624',
        borderColor: '#484848',
        dataBackground: {
          lineStyle: { color: '#818181' },
          areaStyle: { color: '#818181' },
        },
        selectedDataBackground: {
          lineStyle: { color: '#a4a8b0' },
          areaStyle: { color: '#FFFFFF86', opacity: 1 },
        },
        // 两侧的缩放手柄
        handleStyle: {
          color: '#7C7C7CD2', borderWidth: 0
        },
        // 顶部移动手柄
        moveHandleStyle: {
          color: '#7C7C7CD2', borderWidth: 0, borderColor: '#7C7C7CD2',
        },
        // 缩放和移动手柄的高亮样式
        emphasis: {
          handleStyle: {
            color: '#9A9A9A', borderWidth: 0, borderColor: '#9A9A9A',
          },
          moveHandleStyle: {
            color: '#9A9A9A', borderWidth: 0, borderColor: '#9A9A9A',
          }
        }
      }
    }
  } else {
    return {
      ...common, ...{
        backgroundColor: '#FFFFFF00',
        fillerColor: '#AFAFAF45',
        borderColor: '#bebebe',
        dataBackground: {
          lineStyle: { color: '#bebebe' },
          areaStyle: { color: '#bebebe' },
        },
        selectedDataBackground: {
          lineStyle: { color: '#AEAEAE' },
          areaStyle: { color: '#AEAEAE', opacity: 0.5 },
        },
        // 两侧的缩放手柄
        handleStyle: {
          color: '#BEBEBED2', borderWidth: 0
        },
        // 顶部移动手柄
        moveHandleStyle: {
          color: '#BEBEBE8B', borderWidth: 0, borderColor: '#BEBEBE8B',
        },
        // 缩放和移动手柄的高亮样式
        emphasis: {
          handleStyle: {
            color: '#BEBEBE', borderWidth: 0, borderColor: '#BEBEBE',
          },
          moveHandleStyle: {
            color: '#BEBEBE', borderWidth: 0, borderColor: '#BEBEBE',
          }
        }
      }
    }
  }
}
/**
 * 图例样式
 */
export const legend = (): any => {
  return {
    left: 'left',
    textStyle: {
      fontFamily: common().fontFamily,
      color: common().legendColor
    },
    itemStyle: { opacity: 0 }
  }
}
/**
 * 提示框样式
 */
export const tooltip = (): any => {
  if (isDark.value) {
    return {
      show: true,
      trigger: 'axis',
      confine: true,
      enterable: false,
      backgroundColor: '#2B2B2B',
      borderColor: '#252525',
      borderWidth: 2,
      textStyle: {
        color: '#A7A7A7'
      },
      extraCssText: 'box-shadow: 5px 5px 10px 3px rgba(255, 255, 255, 0.1);'
    }
  } else {
    return {
      show: true,
      trigger: 'axis',
      // 是否将 tooltip 框限制在图表的区域内。
      confine: true,
      // 鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。
      enterable: false,
      backgroundColor: '#ffffff',
      borderColor: '#ffffff',
      borderWidth: 2,
      extraCssText: 'box-shadow: 5px 5px 10px 3px rgba(0, 0, 0, 0.1);'
    }
  }
}
/**
 * 颜色样式
 */
export const clr = (): any => {
  if (isDark.value) {
    return {
      purple: '#846ba9',
      green: '#538c37',
      yellow: '#b07e00',
      red: '#811111',
      gray: '#8f8888'
    }
  } else {
    return {
      purple: '#44287f',
      green: '#95d977',
      yellow: '#e3a300',
      red: '#e35959',
      gray: '#8f8888'
    }
  }
}
/**
 * 折线图样式
 */
export const line = (): any => {
  if (isDark.value) {
    return {
      markPointColor: '#bababa',
      gradientColor: ['#469546', '#a88e00', '#9e000c']
    }
  } else {
    return {
      markPointColor: '#737373',
      gradientColor: ['#95d977', '#e3a300', '#e35959']
    }
  }
}
/**
 * 柱状图样式
 */
export const barTheme = (): any => {
  if (isDark.value) {
    return {
      itemColor1: '#469546',
      itemColor2: '#44287f'
    }
  } else {
    return {
      itemColor1: '#72d571',
      itemColor2: '#8982db'
    }
  }
}
/**
 * 树状图样式
 */
export const treemap = (): any => {
  if (isDark.value) {
    return {
      axisLineColor: '#212121',
      succItemStyle: { color: '#538c37', borderColor: '#3c602a' },
      succLineStyle: { width: 1, color: '#575757', },
      failItemStyle: { color: '#811111', borderColor: '#941313', },
      failLineStyle: { width: 3, color: '#811111', },
      warnItemStyle: { color: '#b07e00', borderColor: '#805f0c', },
      warnLineStyle: { width: 3, color: '#b07e00', }
    }
  } else {
    return {
      axisLineColor: '#f6f6f6',
      succItemStyle: { color: '#95d977', borderColor: '#538c37' },
      succLineStyle: { width: 1, color: '#d4d4d4', },
      failItemStyle: { color: '#e35959', borderColor: '#c30000', },
      failLineStyle: { width: 3, color: '#e35959', },
      warnItemStyle: { color: '#e3a300', borderColor: '#b07e00', },
      warnLineStyle: { width: 3, color: '#e3a300', }
    }
  }
}
/**
 * 关系图样式
 */
export const graph = (): any => {
  if (isDark.value) {
    return {
      itemShadowColor: 'rgba(0, 0, 0, 0.5)'
    }
  } else {
    return {
      itemShadowColor: 'rgba(0, 0, 0, 0.7)'
    }
  }
}